package ;

import easelhx.display.Bitmap;
import easelhx.display.Container;
import easelhx.display.Shape;
import easelhx.display.Stage;
import easelhx.events.MouseEvent;
import easelhx.js.Image;
import easelhx.ui.Touch;
import easelhx.utils.Ticker;
import js.HTMLCanvasElement;
import js.Lib;

/**
 * ...
 * @author 
 */

class DragAndDropHitAreaExample implements IExample
{

	private var canvas:HTMLCanvasElement;
	private var stage:Stage;
	private var update:Bool;
	
	public function new() 
	{
		canvas = cast Lib.document.getElementById("testCanvas");
		stage =  new Stage(canvas);
	}
	
	public function run():Void
	{
		// enable touch interactions if supported on the current device:
		Touch.enable(stage);

		// enabled mouse over / out events
		stage.enableMouseOver(10);

		// load the source image:
		var image:Image = new Image();
		image.src = "assets/daisy.png";
		image.onload = handleImageLoad;
	}
	
	private function stop() {
		Ticker.removeListener(this);
	}

	private function handleImageLoad(event) {
		var image:Image = event.target;
		var bitmap:Bitmap;
		var container:Container = new Container();
		stage.addChild(container);
		
		// create a shape that represents the center of the daisy image:
		var hitArea:Shape = new Shape();
		hitArea.graphics.beginFill("#FFF").drawEllipse( -11, -14, 24, 18);
		
		var scale:Float = 1;

		// create and populate the screen with random daisies:
		for(i in 0 ... 100){
			bitmap = new Bitmap(image);
			container.addChild(bitmap);
			bitmap.x = canvas.width * Math.random();
			bitmap.y = canvas.height * Math.random();
			bitmap.rotation = 360 * Math.random();
			bitmap.regX = bitmap.image.width/2;
			bitmap.regY = bitmap.image.height / 2;
			scale = Math.random() * 0.4 + 0.6;
			Reflect.setField(bitmap, "scale", scale);
			bitmap.scaleX = bitmap.scaleY = scale;
			bitmap.name = "bmp_"+i;
			
			// assign the hitArea to each bitmap to use it for hit tests:
			bitmap.hitArea = hitArea;

			// wrapper function to provide scope for the event handlers:
			(function(target) {
				
				Reflect.setField(target, MouseEvent.onPress, function (e) {
					container.addChild(cast(target, Bitmap));
					var offset = {x:cast(target, Bitmap).x-e.stageX, y:cast(target, Bitmap).y-e.stageY};
					
					Reflect.setField(e, MouseEvent.onMouseMove, function (e) {
						cast(target, Bitmap).x = e.stageX+offset.x;
						cast(target, Bitmap).y = e.stageY+offset.y;
						update = true;
					});
					
				});
				
				Reflect.setField(target, MouseEvent.onMouseOver, function (e) {
					scale = Reflect.field(target, "scale");
					target.scaleX = target.scaleY = scale * 1.2;
					update = true;
				});
				
				Reflect.setField(target, MouseEvent.onMouseOut, function (e) {
					scale = Reflect.field(target, "scale");
					target.scaleX = target.scaleY = scale;
					update = true;
				});
				
			})(bitmap);
		}

		//document.getElementById("loader").className = "";
		Ticker.addListener(this);
	}

	private function tick() {
		// this set makes it so the stage only re-renders when an event handler indicates a change has happened.
		if (update) {
			update = false; // only update once
			stage.update();
		}
	}
	
}